<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>dom商品的筛选</title>
    <style>
        body,ul{ margin: 0px; padding: 0px; }
        li{ list-style: none}
        a{ text-decoration: none; color: #333;}
        #list{ width: 800px; margin: 0px auto;}
        #list li{width: 800px; height: 40px; line-height: 40px; border-bottom: 1px solid salmon; }
        #list span{ display: inline-block; width: 80px; }
        #list a{ margin-left: 10px;}
        #p1{ width: 800px; height: 80px; border: 1px solid #f40; margin:10px auto; padding: 10px 5px;}
        #p1 span{ width: 150px; height: 30px; line-height: 30px; border: 1px solid green; display: inline-block; position: relative; margin-left: 5px; text-indent: 15px;}
        #p1 span img{ width: 20px; height: 20px; position: absolute; top:5px; right: 0px; cursor: pointer;}
    </style>
    <script>
        window.onload=function(){
            var dataArr=[{title:"价格:",data:["0-299","300-699","700-1099","1100-1599","1600-2099","2100以上"]},
                {title:"类别:",data:["文件夹","办公套装","文件框","三针一钉","订书机","笔记本"]},
                {title:"品牌:",data:["得力","齐心","尤碧丽","三秒","好得利","创新"]},]
            var oUl=document.getElementById("list");
            for(var i=0;i<dataArr.length;i++){//初始化页面数据
                var newLi=document.createElement("li");
                var newSpan=document.createElement("span");
                newSpan.innerText=dataArr[i].title;
                newLi.appendChild(newSpan);
                for(var j=0;j<dataArr[i].data.length;j++){
                    var newA=document.createElement("a");
                    newA.href="javascript:;";
                    newA.innerText=dataArr[i].data[j];
                    newLi.appendChild(newA);
                }
                oUl.appendChild(newLi);
            }
            var oLi=oUl.getElementsByTagName("li");
            var chose={};
            for(var i=0;i<oLi.length;i++){
               var aA= oLi[i].getElementsByTagName("a");
                oLi[i].index=i;
                for(var j=0;j<aA.length;j++){
                    aA[j].onclick=function(){
                        if(this.parentNode.than){
                            this.parentNode.than.style.color="";
                        }
                        this.parentNode.than=this;
                        this.style.color="red";
                        chose[this.parentNode.index]=this.parentNode.firstChild.innerText+this.innerText;
                        var str="";
                        for(var m=0;m<oLi.length;m++){
                           if(chose[m]){
                               str+='<span>'+chose[m]+'<img xx='+m+' src="img/xxx.jpg"></span>';
                           }
                        }
                        var oP=document.getElementById("p1");
                        oP.innerHTML=str;
                        var oImg=oP.getElementsByTagName("img");
                        for(var n=0;n<oImg.length;n++){
                            oImg[n].onclick=function(){
                                oLi[this.getAttribute("xx")].than.style.color="";
                                this.parentNode.parentNode.removeChild(this.parentNode);
                               /* this.parentNode.remove(); ie不行*/
                                delete chose[this.getAttribute("xx")];
                                console.log(chose);
                            }
                        }
                    }
                }
            }
        }
    </script>

</head>
<body>
<ul id="list">
   <!-- <li>
        <span>价格:</span>
        <a href="javascript:;">0-299</a>
        <a href="javascript:;">300-699</a>
        <a href="javascript:;">700-1099</a>
        <a href="javascript:;">1100-1599</a>
        <a href="javascript:;">1600-2099</a>
        <a href="javascript:;">2100以上</a>
    </li>
    <li>
        <span>类别:</span>
        <a href="javascript:;">文件夹</a>
        <a href="javascript:;">办公套装</a>
        <a href="javascript:;">文件框</a>
        <a href="javascript:;">三针一钉</a>
        <a href="javascript:;">订书机</a>
        <a href="javascript:;">笔记本</a>
    </li>
    <li>
        <span>品牌:</span>
        <a href="javascript:;">得力</a>
        <a href="javascript:;">齐心</a>
        <a href="javascript:;">尤碧丽</a>
        <a href="javascript:;">三秒</a>
        <a href="javascript:;">好得利</a>
        <a href="javascript:;">创新</a>
    </li>-->
</ul>
<p id="p1">
    <!--<span>价格:0-299<img src="img/xxx.jpg"></span>
    <span>价格:0-299<img src="img/xxx.jpg"></span>-->
</p>

</body>
</html>